<!--
 * @Autor: Ruohong Yu
 * @Date: 2022-12-05 16:50:59
 * @Description: file content
 * @FilePath: \ebook\src\components\shelf\ShelfFooter.vue
-->
<template>
  <div class="shelf-footer" v-show="isEditMode">
    <div class="shelf-footer-tab-wrapper" v-for="item in tabs" :key="item.index" @click="onTabClick(item)">
      <div class="shelf-footer-tab" :class="{'is-selected':isSelected}">
        <div class="icon-private tab-icon" v-if="item.index===1&&!isPrivate"></div>
        <div class="icon-private-see tab-icon" v-if="item.index===1&&isPrivate"></div>
        <div class="icon-download tab-icon" v-if="item.index===2&&!isDownload"></div>
        <div class="icon-download-remove tab-icon" v-if="item.index===2&&isDownload"></div>
        <div class="icon-move tab-icon" v-if="item.index===3"></div>
        <div class="icon-shelf tab-icon" v-if="item.index===4"></div>
        <div class="tab-text" :class="{'remove-text':item.index===4}">{{label(item)}}</div>
      </div>
    </div>
  </div>
  <toast :text="toastText" ref="toast"></toast>
  <popup :title="popupTitle" :btn="popupBtn" ref="popup"></popup>
  <shelf-group-dialog ref="groupDialog"></shelf-group-dialog>
</template>

<script>
import { storeShelfMixin } from '../../utils/mixin'
import Toast from '../common/Toast.vue'
import Popup from '../common/Popup.vue'
import ShelfGroupDialog from '../shelf/ShelfGroupDialog.vue'
import { getUsername, removeLocalStorage, saveBookShelf } from '@/utils/localStorage'
import { download } from '../../api/store'
import { removeLocalForage } from '@/utils/localForage'
import { changeShelfPrivate, delUserShelfBook } from '@/api/shelf'
export default {
  mixins: [storeShelfMixin],
  components: { Toast, Popup, ShelfGroupDialog },
  data () {
    return {
      toastText: '',
      popupTitle: '',
      popupBtn: []
    }
  },
  computed: {
    isSelected () {
      return this.shelfSelected && this.shelfSelected.length > 0
    },
    tabs () {
      return [
        {
          label: this.$t('shelf.private'),
          label2: this.$t('shelf.noPrivate'),
          index: 1
        },
        {
          label: this.$t('shelf.download'),
          label2: this.$t('shelf.delete'),
          index: 2
        },
        {
          label: this.$t('shelf.move'),
          index: 3
        },
        {
          label: this.$t('shelf.remove'),
          index: 4
        }
      ]
    },
    isPrivate () {
      if (!this.isSelected) {
        return false
      } else {
        return this.shelfSelected.every(item => item.private)
      }
    },
    isDownload () {
      if (!this.isSelected) {
        return false
      } else {
        return this.shelfSelected.every(item => item.cache)
      }
    }
  },
  methods: {
    async downloadSelectedBook () {
      for (let i = 0; i < this.shelfSelected.length; i++) {
        await this.downloadBook(this.shelfSelected[i]).then(book => {
          book.cache = true
        })
      }
    },
    downloadBook (book) {
      let text = ''
      this.toastText = text
      this.$refs.toast.show()
      this.$refs.toast.continueShow()
      return new Promise((resolve, reject) => {
        download(book, book => {
          this.$refs.toast.hide()
          resolve(book)
        }, reject, progressEvent => {
          const progress = Math.floor(progressEvent.loaded / progressEvent.total * 100) + '%'
          text = this.$t('shelf.progressDownload').replace('$1', `${book.fileName}.epub(${progress})`)
          // console.log(text)
          this.toastText = text
          this.$refs.toast.updateText(text)
        })
      })
    },
    setPrivate () {
      let isPrivate
      if (this.isPrivate) {
        isPrivate = false
      } else {
        isPrivate = true
      }

      changeShelfPrivate(isPrivate, getUsername(), this.shelfSelected).then((res) => {
        if (res.data.status === 0) {
          this.shelfSelected.forEach(book => {
            book.private = isPrivate
          })
          this.$refs.popup.hide()
          this.setIsEditMode(false)
          saveBookShelf(this.shelfList)
          if (isPrivate) {
            this.toastText = this.$t('shelf.setPrivateSuccess')
            this.$refs.toast.updateText(this.toastText)
            this.$refs.toast.show()
          } else {
            this.toastText = this.$t('shelf.closePrivateSuccess')
            this.$refs.toast.updateText(this.toastText)
            this.$refs.toast.show()
          }
        } else {
          this.toastText = res.data.msg
          this.$refs.toast.updateText(this.toastText)
          this.$refs.toast.show()
        }
      })
    },
    showPrivate () {
      this.popupTitle = this.isPrivate ? this.$t('shelf.closePrivateTitle') : this.$t('shelf.setPrivateTitle')
      this.popupBtn = [
        {
          text: this.isPrivate ? this.$t('shelf.close') : this.$t('shelf.open'),
          click: () => {
            this.setPrivate()
          }
        },
        {
          text: this.$t('shelf.cancel'),
          click: () => {
            this.$refs.popup.hide()
          }
        }
      ]
      this.$refs.popup.show()
    },
    removeSelectedBook () {
      Promise.all(this.shelfSelected.map(book =>
        this.removeBook(book)
      )).then(books => {
        books.map(book => {
          book.cache = false
          return book
        })
        saveBookShelf(this.shelfList)
        this.toastText = this.$t('shelf.removeDownloadSuccess')
        this.$refs.toast.updateText(this.toastText)
        this.$refs.toast.show()
      })
    },
    removeBook (book) {
      return new Promise((resolve, reject) => {
        removeLocalStorage(`${book.categoryText}/${book.fileName}-info`)
        removeLocalForage(`${book.fileName}`, resolve, reject)
        resolve(book)
      })
    },
    async setDownload () {
      this.$refs.popup.hide()
      this.setIsEditMode(false)
      saveBookShelf(this.shelfList)
      if (this.isDownload) {
        this.removeSelectedBook()
      } else {
        await this.downloadSelectedBook()
        saveBookShelf(this.shelfList)
        this.toastText = this.$t('shelf.setDownloadSuccess')
        this.$refs.toast.show()
        this.$refs.toast.updateText(this.toastText)
      }
    },
    showDownload () {
      this.popupTitle = this.isDownload ? this.$t('shelf.removeDownloadTitle') : this.$t('shelf.setDownloadTitle')
      this.popupBtn = [
        {
          text: this.isDownload ? this.$t('shelf.delete') : this.$t('shelf.open'),
          click: () => {
            this.setDownload()
          }
        },
        {
          text: this.$t('shelf.cancel'),
          click: () => {
            this.$refs.popup.hide()
          }
        }
      ]
      this.$refs.popup.show()
    },
    removeSelected () {
      const selectedbookname = []
      for (let i = 0; i < this.shelfSelected.length; i++) {
        selectedbookname.push(this.shelfSelected[i].fileName)
      }
      delUserShelfBook(getUsername(), selectedbookname).then((res) => {
        if (res.data.status === 0) {
          this.shelfSelected.forEach(selected => {
            this.setShelfList(this.shelfList.filter(book => book !== selected))
          })
          this.setShelfSelected([])
          this.$refs.popup.hide()
          this.setIsEditMode(false)
          saveBookShelf(this.shelfList)
        } else {
          this.toastText = res.data.message
          this.$refs.toast.show()
          this.$refs.toast.updateText(this.toastText)
          this.$refs.popup.hide()
          this.setIsEditMode(false)
        }
      })
    },
    showRemove () {
      let title
      if (this.shelfSelected.length === 1) {
        title = this.$t('shelf.removeBookTitle').replace('$1', `《${this.shelfSelected[0].title}》`)
      } else {
        title = this.$t('shelf.removeBookTitle').replace('$1', this.$t('shelf.selectedBooks'))
      }
      this.popupTitle = title
      this.popupBtn = [
        {
          text: this.$t('shelf.removeBook'),
          type: 'danger',
          click: () => {
            this.removeSelected()
          }
        },
        {
          text: this.$t('shelf.cancel'),
          click: () => {
            this.$refs.popup.hide()
          }
        }
      ]
      this.$refs.popup.show()
    },
    onTabClick (item) {
      if (!this.isSelected) {
        return
      }
      switch (item.index) {
        case 1:
          this.showPrivate()
          break
        case 2:
          this.showDownload()
          break
        case 3:
          this.$refs.groupDialog.show()
          break
        case 4:
          this.showRemove()
          break
        default:
          break
      }
    },
    label (item) {
      switch (item.index) {
        case 1:
          return this.isPrivate ? item.label2 : item.label
        case 2:
          return this.isDownload ? item.label2 : item.label
        default:
          return item.label
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.shelf-footer{
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 120;
  display: flex;
  width: 100%;
  height: px2rem(48);
  background: white;
  box-shadow: 0 px2rem(-2) px2rem(4) 0 rgba(0,0,0,.1);
  .shelf-footer-tab-wrapper{
    flex: 1;
    width: 25%;
    height: 100%;
    .shelf-footer-tab{
      width: 100%;
      height: 100%;
      opacity: .5;
      @include columnCenter;
      &.is-selected{
        opacity: 1;
      }
      .tab-icon{
        font-size: px2rem(20);
        color: #666;
      }
      .tab-text{
        margin-top: px2rem(5);
        font-size: px2rem(12);
        color: #666;
        &.remove-text{
          color: $color-pink;
        }
      }
      .icon-shelf{
        color: $color-pink;
      }
    }
  }
}
</style>
